<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模仿QQ列表伸缩效果</title>
    <style>
        .content{width: 150px;margin: 30px auto;}
        .item {display: flex;width: 150px;height: 30px;align-items: center;  }
        .item img {margin-right: 5px}
        .item .itemName {  }
        .students {display: none}
        .students .contentItem {height: 30px;line-height: 30px;margin-left: 15px;font-size: .9rem;}
    </style>
</head>
<body>
<div class="content">
    <div class="item">
        <img src="img/QQListFlex/ico1.gif">
        <div class="itemName">大学同学</div>
    </div>
    <div class="students">
        <div class="contentItem">张大权</div>
        <div class="contentItem">谢春花</div>
        <div class="contentItem">刘辉煌</div>
    </div>
    <div class="item">
        <img src="img/QQListFlex/ico1.gif">
        <div class="itemName">家人</div>
    </div>
    <div class="students">
        <div class="contentItem">孙中山</div>
        <div class="contentItem">孙悟空</div>
        <div class="contentItem">孙帅哥</div>
    </div>
    <div class="item">
        <img src="img/QQListFlex/ico1.gif">
        <div class="itemName">honey</div>
    </div>
    <div class="students">
        <div class="contentItem">亲爱的</div>
    </div>
</div>

<script>
    var status = 1;
    var students = document.getElementsByClassName('students');
    var items = document.getElementsByClassName('item');

    items[0].onclick = function () {
        handle(0);
    }
    items[1].onclick = function () {
        handle(1);
    }
    items[2].onclick = function () {
        handle(2);
    }

    function handle(i) {
        if(status == 1){
            items[i].getElementsByTagName('img')[0].setAttribute("src","img/QQListFlex/ico2.gif");
            students[i].style.display = 'block';
        }else if(status == -1){
            items[i].getElementsByTagName('img')[0].setAttribute("src","img/QQListFlex/ico1.gif");
            students[i].style.display = 'none';
        }
        status = -status;
    }
</script>
</body>
</html>